<!-- 确认订单 -->
<template>
	<view class="page_box">
		<view class="content_box">
			<!-- 门店 -->
			<view class="add-address-box flex-sub x-f">
				<view class="store-card ma20 pa20" v-if="storeInfo.name">
					<view class="x-bc card-head">
						<view class="x-f">
							<view class="img-wrap mr20"><image class="store-img" :src="storeInfo.image_first" mode=""></image></view>
							<view class="">
								<view class="store-title mb10">{{ storeInfo.name }}</view>
								<view class="streo-dis">距您{{ storeInfo.distance_text }}</view>
							</view>
						</view>
						<button class="cu-btn cur-btn" @tap="$Router.push({ path: '/pages/app/store/location' })">切换门店</button>
					</view>
					<view class="store-address pt20">
						<text class="cuIcon-location mr10"></text>
						{{ storeInfo.address }}
					</view>
				</view>
				<view class="store-card x-bc ma20 pa20" v-else @tap="$Router.push({ path: '/pages/app/store/location' })">
					<text class="streo-dis">请选择门店~</text>
					<text class="cuIcon-right streo-dis"></text>
				</view>
				<image class="address-bg" :src="$IMG_URL + '/address_line.png'" mode=""></image>
			</view>
			<!-- 联系方式 -->
			<view class="contact-box my20 px20">
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="姓名" prop="realname">
					<u-input placeholder="请输入姓名" :placeholderStyle="placeholderStyle" v-model="orderName" type="text"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-position="left" label="手机号" prop="phone" label-width="150">
					<u-input placeholder="请输入手机号" :placeholderStyle="placeholderStyle" v-model="orderPhone" type="number"></u-input>
					<!-- #ifdef MP-WEIXIN -->
					<button class="cu-btn sm phone-btn" slot="right" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">使用微信手机号</button>
					<!-- #endif -->
				</u-form-item>
			</view>
			<!-- 确认订单商品卡片 -->
			<view class="goods-list" v-for="g in perGoodsList" :key="g.sku_price_id">
				<view class="goods-card">
					<t-mini-card
						:title="g.detail.title"
						:describe="g.detail.current_sku_price.goods_sku_text"
						:price="g.detail.current_sku_price.price"
						:image="g.detail.current_sku_price.image ? g.detail.current_sku_price.image : g.detail.image"
					>
						<block slot="cardBottom">
							<view class="goods-price x-bc">
								<view class="">
									<text>￥{{ g.detail.current_sku_price.price }}</text>
								</view>
								<text class="goods-num">x{{ g.goods_num }}</text>
							</view>
						</block>
					</t-mini-card>
				</view>
			</view>

			<view class="coupon x-bc item-list u-m-b-20 u-m-t-20" v-if="pickerData.couponList.length">
				<view class="item-title">优惠券</view>
				<view class="x-f" @tap="selCoupon">
					<text class="price" v-if="pickerData.couponList.length">{{ pickerData.title }}</text>
					<text class="sel-coupon" v-else>暂无优惠券</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>

			<!-- 活动优惠 -->
			<view class="u-m-b-20 u-m-t-20" v-if="orderPre.activity_discount_infos && orderPre.activity_discount_infos.length">
				<view class="x-bc item-list border-top" v-for="item in orderPre.activity_discount_infos" :key="item.activity_id">
					<view class="item-title">{{ item.activity_title }}</view>
					<view class="">
						<text class="price" style="color: #666;" v-if="item.activity_type !== 'full_gift'">-￥{{ item.activity_discount_money || '0.00' }}</text>
						<text class="price" style="color: #666;" v-else>赠￥{{ item.activity_gift_money || '0.00' }}券包</text>
					</view>
				</view>
			</view>

			<!-- 备注 -->
			<view class="remark-box x-f item-list">
				<view class="item-title">备注</view>
				<input class="item-input" placeholder-class="input-pl" type="text" v-model="remark" placeholder="建议留言前先于卖家沟通确认" />
			</view>
			<view class=" x-bc item-list border-top u-m-b-60">
				<view class="item-title">商品金额</view>
				<view class="x-f">
					<text class="price">￥{{ orderPre.goods_amount || '0.00' }}</text>
				</view>
			</view>
		</view>
		<view class="foot_box x-f">
			<text class="num">共1件</text>
			<view class="all-money">
				<text>合计：</text>
				<text class="price">￥{{ orderPre.total_fee || '0.00' }}</text>
			</view>
			<button class="cu-btn sub-btn" @tap="subOrder" :disabled="isSubOrder">
				<text v-if="isSubOrder" class="cuIcon-loading2 cuIconfont-spin"></text>
				提交订单
			</button>
		</view>
		<!-- pricker -->
		<sh-picker-modal v-if="pickerData.couponList" @changeCoupon="changeCoupon" v-model="showPicker" :pickerData="pickerData"></sh-picker-modal>
	</view>
</template>

<script>
import shPickerModal from './children/sh-picker-modal.vue';
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {
		shPickerModal
	},
	data() {
		return {
			orderPhone: '',
			orderName: '',
			labelStyle: {
				'font-size': '28rpx',
				'font-weight': '500',
				color: '#333'
			},
			placeholderStyle: 'font-size: 28rpx;color:#c4c4c4;',
			showPicker: false,
			isSubOrder: false,
			pickerData: {
				title: '选择优惠券',
				couponList: []
			},
			address: {
				is_default: 0
			},
			storeList: [], //门店列表
			addressId: 0,
			from: '',
			orderType: '',
			grouponBuyType: 'alone',
			grouponId: 0,
			goodsList: [], //传递过来的参数
			perGoodsList: {}, //确认单订单商品
			currentGoodsId: 0, //当前商品id.
			currentSkuId: 0, //商品的规格ID
			remark: '',
			orderPre: {},
			couponId: 0,
			couponPrice: '选择优惠券',
			selfPhone: 0 //编辑手机号
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			storeInfo: ({ user }) => user.storeInfo
		})
	},
	watch: {
		address(val, oldVal) {
			if (this.address) {
				this.addressId = this.address.id;
				this.getPre();
			}
		}
	},
	async onLoad() {
		this.orderName = this.userInfo.nickname;
		this.orderPhone = this.userInfo.mobile;
		this.goodsList = this.$Route.query.goodsList;
		this.from = this.$Route.query.from;
		this.orderType = this.$Route.query.orderType;
		this.grouponBuyType = this.$Route.query.grouponBuyType;
		this.grouponId = this.$Route.query.grouponId;
		await this.init();
	},
	onShow() {},
	methods: {
		...mapActions(['getCartList', 'getUserInfo']),
		init() {
			return Promise.all([this.getDefaultAddress(), this.getPre(), this.getCoupons()]);
		},
		// 获取微信手机号
		decryptPhoneNumber(e) {
			if (e.detail.errMsg === 'getPhoneNumber:ok') {
				this.$api('user.wxMiniProgramPhone', {
					session_id: uni.getStorageSync('session_id'),
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					type: 'get'
				}).then(res => {
					if (res.code === 1) {
						this.orderPhone = res.data.phone;
					}
				});
			}
		},
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		// 订单信息
		getPre() {
			let that = this;
			that.$api('order.pre', {
				goods_list: that.goodsList,
				from: that.from,
				address_id: that.addressId,
				coupons_id: that.couponId,
				order_type: that.orderType,
				buy_type: that.grouponBuyType,
				groupon_id: that.grouponId
			}).then(res => {
				if (res.code === 1) {
					that.orderPre = res.data;
					that.perGoodsList = res.data.new_goods_list;
					that.perGoodsList.map(item => {
						item.selType = item.dispatch_type;
						that.goodsList.forEach(goods => {
							if (item.goods_id == goods.goods_id && item.sku_price_id == goods.sku_price_id) {
								goods.dispatch_type = item.dispatch_type;

								if (item.store_id) {
									goods.store_id = item.store_id;
								}
							}
						});
					});
				}
			});
		},
		// 提交订单
		subOrder() {
			let that = this;
			that.isSubOrder = true;
			that.$api('order.createOrder', {
				goods_list: that.goodsList,
				from: that.from,
				coupons_id: that.couponId,
				remark: that.remark,
				order_type: that.orderType,
				buy_type: that.grouponBuyType,
				groupon_id: that.grouponId,
				store_id: that.storeInfo.id,
				phone: that.orderPhone,
				consignee: that.orderName
			}).then(res => {
				if (res.code === 1) {
					let orderId = res.data.id;
					let orderSn = res.data.order_sn;
					that.getCartList();
					that.isSubOrder = false;
					//  #ifdef MP-WEIXIN
					this.$store.dispatch('getMessageIds', 'result');
					//  #endif
					if (res.data.status > 0) {
						that.$Router.replace({
							path: '/pages/order/payment/result',
							query: {
								orderSn: orderSn,
								type: '',
								pay: 1
							}
						});
					} else {
						uni.redirectTo({
							url: `/pages/order/payment/method?orderId=${orderId}`
						});
					}
				} else {
					that.isSubOrder = false;
				}
			});
		},
		// 初始地址
		getDefaultAddress() {
			this.$api('address.defaults').then(res => {
				if (res.code === 1) {
					if (res.data) {
						this.address = res.data;
						this.selfPhone = res.data.phone;
					}
				}
			});
		},
		// 可用优惠券
		getCoupons() {
			let that = this;
			that.$api('order.coupons', {
				goods_list: that.goodsList,
				from: that.from,
				address_id: that.addressId,
				coupons_id: that.couponId,
				order_type: that.orderType
			}).then(res => {
				if (res.code === 1) {
					that.pickerData.couponList = res.data;
				}
			});
		},
		// 选择优惠券
		selCoupon() {
			if (this.pickerData.couponList.length) {
				this.showPicker = true;
			} else {
				this.$tools.toast('暂无优惠券');
			}
		},
		changeCoupon(index) {
			if (index >= 0) {
				this.couponId = this.pickerData.couponList[index].user_coupons_id;
				this.pickerData.title = '-￥' + this.pickerData.couponList[index].amount;
				this.getPre();
			} else {
				this.couponId = 0;
				this.pickerData.title = '选择优惠券';
				this.getPre();
			}
		}
	}
};
</script>

<style lang="scss">
// 门店信息
.add-address-box {
	background: #fff;
	position: relative;
	width: 100%;
	.address-bg {
		position: absolute;
		bottom: 0;
		height: 8rpx;
		width: 100%;
	}
	// 门店卡片
	.store-card {
		background-color: #fff;
		border-radius: 10rpx;
		width: 100%;
		position: relative;
		.card-head {
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #eeeeee;
		}
		.img-wrap,
		.store-img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 6rpx;
		}
		.store-title {
			font-size: 28rpx;
			font-weight: 600;
			color: #000000;
		}
		.streo-dis {
			font-size: 24rpx;
			font-weight: 400;
			color: #b1b3c7;
		}
		.cur-btn {
			background: none;
			padding: 0;
			font-size: 26rpx;
			font-weight: 500;
			color: $t-mainColor;
			position: absolute;
			top: 0rpx;
			right: 20rpx;
		}
		.store-address {
			font-size: 22rpx;
			font-weight: 500;
			color: #999999;
		}
	}
}

// 联系方式
.contact-box {
	background-color: #fff;
	.phone-btn {
		color: $t-mainColor;
		background: none;
		font-size: 26rpx;
	}
}

// 备注
.remark-box {
	margin-top: 20rpx;
	background: #fff;
	padding: 25rpx;
	.item-input {
		flex: 1;
		text-align: end;
		font-size: 28rpx;
	}
	.input-pl {
		color: #c4c4c4;
	}
}
// 商品卡片
.goods-list {
	background: #fff;
	position: relative;
	margin-top: 20rpx;

	/deep/ .goods-title {
		width: 460rpx !important;
	}
	.goods-card {
		padding: 30rpx;
	}
	.goods-price {
		font-size: 30rpx;
		font-weight: 500;
		width: 480rpx;
		.goods-num {
			font-size: 28rpx;
			color: #c4c4c4;
		}
	}
}

.item-list {
	height: 100rpx;
	background: #fff;
	padding: 0 25rpx;

	.item-title {
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.detail {
		font-size: 28rpx;
		color: #333;
	}

	.price {
		font-size: 26rpx;
		color: $t-mainColor;
		margin-right: 20rpx;
	}
	.sel-coupon {
		font-size: 26rpx;
		color: #c4c4c4;
		margin-right: 20rpx;
	}
	.cuIcon-right {
		color: #c4c4c4;
	}
}

.remark-box,
.coupon {
	border-top: 1rpx solid rgba(#dfdfdf, 0.5);
}
.border-top {
	border-top: 1rpx solid rgba(#dfdfdf, 0.5);
}

.foot_box {
	height: 100rpx;
	padding: 0 25rpx;
	justify-content: flex-end;
	background-color: #fff;
	border-top: 1rpx solid rgba(#dfdfdf, 0.5);

	.num {
		font-size: 26rpx;
		color: #999;
	}

	.all-money {
		margin: 0 60rpx 0 20rpx;

		.price {
			color: $t-mainColor;
		}
	}

	.sub-btn {
		width: 210rpx;
		height: 70rpx;
		background: linear-gradient(to right, $t-gradualColor, $t-mainColor);
		border-radius: 35rpx;
		font-size: 28rpx;
		color: #fff;
	}
}
</style>
